<template>
  <el-container>
    <el-header>
      <div class="tab-area">
        <el-tabs
          v-model="activateTab"
          @tab-click="handleClick"
          type="card"
          class="questionaire-header"
        >
          <el-tab-pane
            v-for="item in tabs"
            :key="item.name"
            :label="item.name"
            :name="item.name"
          >
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="operation-area">
        <div class="preview" @click="share">
          <i class="el-icon-share"></i>
          <span class="margin-span">分享</span>
        </div>
        &nbsp;&nbsp;
        <div class="preview" @click="preview">
          <i class="el-icon-view"></i>
          <span class="margin-span">预览</span>
        </div>
        <el-button
          type="primary"
          v-if="publish"
          class="publish"
          @click="changePublish"
          >暂停发布</el-button
        >
        <el-button type="primary" v-else class="publish" @click="changePublish"
          >发布问卷</el-button
        >
      </div>
    </el-header>
    <el-main>
      <!-- 编辑组件 -->
      <edit
        v-if="activateTab === '普通问卷'"
        :questionnaire_ids="questionnaire_id"
      ></edit>
      <edit-vote
        v-if="activateTab === '投票问卷'"
        :questionnaire_ids="questionnaire_id"
      ></edit-vote>
      <edit-signup
        v-if="activateTab === '报名问卷'"
        :questionnaire_ids="questionnaire_id"
      ></edit-signup>
      <edit-exam
        v-if="activateTab === '考试问卷'"
        :questionnaire_ids="questionnaire_id"
      >
      </edit-exam>
      <edit-cardin
        v-if="activateTab === '疫情打卡问卷'"
        :questionnaire_ids="questionnaire_id"
      >
      </edit-cardin>
      <setup
        v-if="activateTab === '设置'"
        :questionnaire_ids="questionnaire_id"
      ></setup>
      <statistics
        v-if="activateTab === '分析'"
        :questionnaire_ids="questionnaire_id"
      ></statistics>
      <!-- <publish
        v-if="activateTab === '投放'"
        :questionnaire_id="questionnaire_id"
      ></publish> -->
    </el-main>
    <el-dialog
      top="15%"
      class="share"
      title=""
      v-model="dialogVisible"
      width="40%"
    >
      <div class="in-el-dialog">
        <div class="imgOutside">
          <img style="height: 120px" :src="imgUrl" />
        </div>
        <div class="input"><el-input v-model="inputUrl"> </el-input></div>
        <div class="download">
          <el-button @click="downloadUrl">下载二维码</el-button>
        </div>
        <div class="open"><el-button @click="openUrl">打开链接</el-button></div>
      </div>
      <!--      <template #footer>-->
      <!--    <span class="dialog-footer">-->
      <!--      <el-button @click="dialogVisible = false">取 消</el-button>-->
      <!--      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
      <!--    </span>-->
      <!--      </template>-->
    </el-dialog>
  </el-container>
</template>

<script>
  import axios from "axios";
  import Edit from "../components/Edit.vue";
  import Setup from "@/views/Setup";
  import Statistics from "@/views/Statistics";
  import EditVote from "../components/EditVote.vue";
  import EditSignup from "../components/EditSignup.vue";
  import EditExam from "../components/EditExam.vue";
  import EditCardin from "../components/EditCardin.vue";
  // import Publish from "../components/Publish.vue";
  export default {
    components: {
      Edit,
      Setup,
      Statistics,
      EditVote,
      EditSignup,
      EditExam,
      EditCardin,
    },
    data() {
      return {
        imgUrl: "",
        inputUrl: "",
        dialogVisible: false,
        questionnaire_id: null,
        form_output: {
          questionnaire_id: "",
          form: "",
        },
        form_share: {
          questionnaire_id: "",
        },
        tabs: [
          {
            // path: "/questionnaire/edit/",
            name: "",
          },
          {
            // path: "/questionnaire/settings/",
            name: "设置",
          },
          // {
          //   name: "投放",
          // },
          {
            // path: "/questionnaire/analyze/",
            name: "分析",
          },
        ],
        activateTab: "",
        publish: false,
        timer: null,
        to: null,
      };
    },
    beforeUnmount() {
      this.timer = null;
    },
    async created() {
      this.questionnaire_id = this.$route.params.id;
      this.to = this.$route.params.id;
      // this.tabs[0].name = this.$route.query.msg;
      // this.activateTab = this.$route.query.msg;
      if (typeof this.questionnaire_id == "string") {
        await axios
          .post("decode/", {
            questionnaire_id: this.questionnaire_id,
          })
          .then((response) => {
            if (response.data.code == -1) {
              this.$router.push({
                path: "/failure",
                query: {
                  msg: "该问卷不存在或您没有权限访问",
                },
              });
            }
            this.questionnaire_id = response.data.id;
          });
      }

      await axios
        .post("getquestionnairetype/", { questionnaire_id: this.to })
        .then((response) => {
          this.tabs[0].name = response.data.msg;
          this.activateTab = response.data.msg;
        });

      // clearTimeout(this.timer);
      // this.timer = setTimeout(() => {
      await axios
        .post("getstatus/", { questionnaire_id: this.questionnaire_id })
        .then((response) => {
          this.publish = response.data.status;
          console.log(response.data.status);
        });
      // }, 200);
    },
    methods: {
      share: function () {
        this.dialogVisible = true;
        this.form_share.questionnaire_id = this.questionnaire_id;
        axios.post("qrcode/", this.form_share).then((response) => {
          console.log(response.data.url);
          this.imgUrl = response.data.url;
        });
        axios.post("code/", this.form_share).then((response) => {
          console.log(response);

          this.inputUrl =
            "http://8.140.186.185:8008/deliver/" + response.data.questionnaire_id;
        });
      },
      downloadUrl: function () {
        console.log(this.imgUrl);
        window.open(this.imgUrl, "_blank");
      },
      openUrl: function () {
        console.log(this.inputUrl);
        window.open(this.inputUrl, "_blank");
      },
      output: function () {
        this.form_output.questionnaire_id = this.questionnaire_id;
        this.form_output.form = "docx";
        axios.post("export_questionnaire/", this.form_output).then((response) => {
          window.open(response.data.url, "_blank");
        });
      },
      handleClick(tab, event) {
        console.log(event);
        this.activateTab = tab.paneName;
        localStorage.setItem("default", this.activateTab);
      },
      preview() {
        this.$router.push("/preview/" + this.to);
      },
      changePublish() {
        const formData = {
          questionnaire_id: this.questionnaire_id,
        };
        axios.post("change_status/", formData).then(() => {
          this.publish = !this.publish;
        });
      },
    },
  };
</script>

<style scoped>
.el-container {
  font-family: "微软雅黑";
}

.questionaire-header {
  margin-top: 20px;
}

.el-main,
.el-container {
  height: 100%;
}

.ico_preview {
  background-image: url(../assets/icons.png);
  background-position: -443px -403px;
  width: 20px;
  height: 15px;
  display: inline-block;
}

.el-header {
  display: flex;
  justify-content: space-between;
  border-style: solid none solid none;
  border-width: 1px;
  border-color: rgb(229, 229, 229);
  /* box-shadow: inset 0 -8px 20px 0px #888888; */
}

.operation-area {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.questionaire-header {
  margin-top: 9px;
}

.margin-span {
  margin-left: 5px;
  margin-right: 5px;
}

.publish {
  margin-left: 20px;
}
.in-el-dialog {
  height: 150px;
}
.download {
  position: absolute;
  top: 130px;
  height: 45px;
  left: 200px;
  width: 120px;
}
.open {
  position: absolute;
  top: 130px;
  left: 400px;
  height: 45px;
  width: 120px;
}
.imgOutside {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 1px solid #e1e7f2;
  border-radius: 3px;
  top: 50px;
}
.input {
  position: absolute;
  height: 55px;
  width: 400px;
  left: 160px;
  top: 70px;
}
</style>